<template>
	<div class="page-wrap">
		<div class="page-content p-0">
			<div class="Dpage-column p-0">
				<div class="search">
					<div class="Dright">
						<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
							<el-form-item label prop="typeSelect">
								<select-para
									size="small"
									class="smallForm"
									v-model="ruleForm.typeSelect"
									:label.sync="ruleForm.typeSelectName"
									:options="typeSelectOptions"
									placeholder="请选择数据类型"
									@change="setOption(0)"
								></select-para>
							</el-form-item>
						</el-form>
						<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
							<el-form-item label prop="GAILV">
								<el-input
									size="small"
									class="smallForm"
									v-model="ruleForm.GAILV"
									placeholder="请输入剂量"
									@input="setOption(0)"
								></el-input>
							</el-form-item>
						</el-form>
						<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
							<el-form-item label prop="resultSelect">
								<select-para
									size="small"
									class="smallForm"
									v-model="ruleForm.resultSelect"
									:label.sync="ruleForm.resultSelectName"
									:options="resultSelectOptions"
									placeholder="请选择结果类型"
									@change="setOption(0)"
								></select-para>
							</el-form-item>
						</el-form>
					</div>
				</div>

				<div class="separate m-b-20"></div>
				<div>
					<div class="search" v-show="tableDataShow">
						<div class="Dright">
							<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
								<el-form-item label prop="typeSelect">
									<select-para
										size="small"
										class="smallForm"
										v-model="ruleForm.jiliangSelect"
										:label.sync="ruleForm.jiliangSelect"
										:options="jiliangOptions"
										placeholder="请选择剂量"
										@change="getChartsData()"
									></select-para>
								</el-form-item>
							</el-form>

							<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
								<el-form-item label prop="resultSelect">
									<select-para
										size="small"
										class="smallForm"
										v-model="ruleForm.ElSelect"
										:label.sync="ruleForm.ElSelectName"
										:options="ElOptions"
										placeholder="请选择损伤类型"
										@change="getChartsData()"
									></select-para>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
				<div class="vcharts" v-show="vchartsShow">
					<div ref="main" :style="{width:'80vw',height:'400px'}"></div>
				</div>
				<div class="separate m-b-20"></div>
				<div class="page-row p-x-0">
					<div class="box-left">
						<el-menu default-active="0" @select="change" class="el-menu-vertical-demo">
							<el-menu-item v-for="(item,index) in caselist" :key="index" :index="index.toString()">
								<span slot="title">{{item.casename}}</span>
							</el-menu-item>
						</el-menu>
					</div>
					<div class="box-right p-0">
						<div class="page-wrap">
							<div class="page-content p-0">
								<div class="page-column p-0" :style="{'overflow':'scroll'}">
									<el-row v-for="(item,index) in ShowList.jiliang_list" :key="index">
										<el-col :span="24">
											<div class="my_title p-b-20">剂量值： {{item.jiliang_value}}</div>
											<el-table v-loading="loading" border :data="item['jiliangTab']" style="width: 100%">
												<el-table-column align="center" prop="name" label="参数" min-width="100"></el-table-column>
												<el-table-column
													align="center"
													v-for="(item,index) in item.distance"
													:key="index"
													:prop="'gailv'+index"
													:label="item.toString()"
													width="90"
												>
													<template slot-scope="scope">
														<div v-if="scope.row['gailv'+index]=='1.7976931348623157e+308'">超出上限</div>
														<div v-else>{{scope.row['gailv'+index]}}</div>
													</template>
												</el-table-column>
											</el-table>
											<div class="separate m-b-20"></div>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import selectPara from "@/components/selectPara"
import commCheckbox from "@/components/commCheckbox"
import ImageCropper from "@/components/ImageCropper"
import FixBottomButton from "@/components/FixBottomButton"
import ueditor from "@/components/ueditor"
import textLength from "@/components/common/comp/textLength"
import { commPara } from "@/mixins/mixins"
import { mapState } from "vuex"
import Axios from "axios"
import { dome, selecttext } from "@/utils/verify.js"
import numerify from "numerify"

export default {
	name: "aboutUs",
	props: {
		basicDataF: Object,
	},
	mixins: [commPara],
	components: {
		selectPara,
		ImageCropper,
		textLength,
		commCheckbox,
		FixBottomButton,
		ueditor,
	},

	data() {
		return {
			activeTab: "2",
			YANTUANNumoptions: [],
			PARAMSoptions: [],
			distinceList: [],
			caselist: [],
			ShowList: [],
			paramsnameSelect: false,
			typeSelectOptions: [],
			nameSelectOptions: [],
			resultSelectOptions: [],
			proSelectOptions: [
				{
					label: "MEAN",
					value: "MEAN",
				},
				{
					label: "50TH",
					value: "WUSHITH",
				},
				{
					label: "90TH",
					value: "JIUSHITH",
				},
				{
					label: "95TH",
					value: "JIUWUTH",
				},
				{
					label: "99TH",
					value: "JIUJIUTH",
				},
				{
					label: "99.5TH",
					value: "JIUJIUWUTH",
				},
			],
			ruleForm: {
				GAILV: "",
				typeSelect: "",
				typeSelectName: "",
				nameSelect: "",
				probabilitySelect: "",
				jiliangSelect: "",
				ElSelect: "",
			},
			tableData: [],
			ElOptions: [],
			jiliangOptions: [],
			tableDataShow: false,
			vchartsShow: false,
			rules: {
				typeSelect: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				GAILV: [
					{
						validator: dome(0, 1000),
						trigger: ["change", "blur"],
					},
				],
				resultSelect: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
			},
			loading: false,
		}
	},
	computed: {
		...mapState({
			basic_Data: (state) => state.token.basic_Data,
			early_Data: (state) => state.token.early_Data,
			longterm_Data: (state) => state.token.longterm_Data,
		}),
	},
	created() {
		// this.setOption(0)
		this.getDATA()
	},
	methods: {
		getDATA() {
			let params = {
				batch_id: this.$route.query.id,
			}
			this.$appApi
				.GET_RESULT_CCDF_TYPE(params)
				.then((res) => {
					var str = res.data.substring(0, 1)
					if (str == "S") {
						var str = res.data.substring(8).split(",")
						this.typeSelectOptions = str.map((item, index) => {
							return {
								label: item,
								value: item,
							}
						})
					} else if (str == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})

			this.$appApi
				.GET_RESULT_TYPE(params)
				.then((res) => {
					var str = res.data.substring(0, 1)
					if (str == "S") {
						var str = res.data.substring(8).split(",")
						this.resultSelectOptions = str.map((item, index) => {
							return {
								label: item,
								value: item,
							}
						})
					} else if (str == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		change(index) {
			this.setOption(index)
		},
		setOption(e) {
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (
						this.ruleForm.typeSelect &&
						this.ruleForm.resultSelect &&
						this.ruleForm.GAILV
					) {
						let tempjiliang = this.ruleForm.GAILV.trim()
							.split(/\s+/)
							.map((item) => {
								return parseFloat(item)
							})
						this.jiliangOptions = tempjiliang.map((item) => {
							return {
								label: item,
								value: item,
							}
						})

						let tempEI = []
						this.tableDataShow = true
						this.paramsnameSelect = true
						let params = {
							batch_id: this.$route.query.id,
							ccdf_type: this.ruleForm.typeSelect,
							result_type: this.ruleForm.resultSelect,
							jiliangs: this.ruleForm.GAILV,
						}
						this.$appApi
							.GET_RESULT_CCDF(params)
							.then((res) => {
								var tempres = res.data.substring(0, 1)
								if (tempres == "S") {
									var str = JSON.parse(res.data.substring(8))
										.ccdf_list
									this.caselist = str
									this.ShowList = str[e]
									this.ShowList.jiliang_list.forEach(
										(item) => {
											item.distance = []
											item.jiliangTab = []
											item.ss_tj_list.forEach((i, n) => {
												let obj = tempEI.find(
													(t) => t == i.ss_tj_name
												)
												if (obj) {
												} else {
													tempEI.push(i.ss_tj_name)
												}
												item.distance = i.distance
												item.jiliangTab.push({
													name: i.ss_tj_name,
												})
												i.gailv.forEach(
													(gailvitem, gailvindex) => {
														item.jiliangTab[n][
															"gailv" + gailvindex
														] = gailvitem
													}
												)
											})
										}
									)
									this.ElOptions = tempEI.map((item) => {
										return {
											label: item,
											value: item,
										}
									})
								} else if (tempres == "E") {
									let message = res.data.substring(6)
									this.$notify.error({
										title: "请求数据失败！",
										message: message,
										type: "success",
									})
								}
							})
							.catch((err) => {
								console.log(err)
							})
					}
				}
			})
		},
		getChartsData() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					let main = this.$refs.main
					let myChart = this.$echarts.init(main)
					if (main) {
						var option = {
							title: {
								text: "",
							},
							tooltip: {
								trigger: "axis",
							},
							legend: {
								data: [],
							},
							grid: {
								left: "3%",
								right: "4%",
								bottom: "3%",
								containLabel: true,
							},
							toolbox: {
								feature: {
									saveAsImage: {},
								},
							},
							xAxis: {
								type: "category",
								boundaryGap: false,
								data: [],
							},
							yAxis: {
								type: "value",
								name: "sv",
							},
							series: [],
						}
						this.caselist.forEach((caseitem) => {
							//caseitem 每个案例
							caseitem.jiliang_list.forEach((item, index) => {
								if (
									item.jiliang_value ==
									this.ruleForm.jiliangSelect
								) {
									//每个案例下用户选择的分类
									item.ss_tj_list.forEach((paramitem) => {
										//param_list
										if (
											paramitem.ss_tj_name ==
											this.ruleForm.ElSelect
										) {
											//用户选择的param

											//图表中导入距离
											if (option.xAxis.data.length == 0) {
												option.xAxis.data =
													paramitem.distance
											}
											let a =
												caseitem.caseid +
												"_" +
												caseitem.casename
											let obj = option.legend.data.indexOf(
												a
											)
											if (obj == "-1") {
												option.legend.data.push(a)
												option.series.push({
													name: a,
													type: "line",
													stack: "总量",
													data: [],
												})
											} else {
											}
											option.series.forEach(
												(charitem) => {
													if (charitem.name == a) {
														charitem.data = []
														paramitem.gailv.forEach(
															(i) => {
																charitem.data.push(
																	i
																)
															}
														)
													}
												}
											)
											myChart.setOption(option)
											this.vchartsShow = true
										}
									})
								}
							})
						})
					}
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-flex-row /deep/ .el-collapse-item__header {
	background: #f3f9fe;
}
.Dpage-column {
	width: 100%;
	height: 100%;
	overflow: scroll;
	.search {
		width: 100%;
		height: auto;
		padding: 20px 0px;
		display: flex;
		justify-content: space-between;
		.Dright {
			display: flex;
			div {
				margin-left: 12px;
			}
		}
	}
	.vcharts {
		width: 100%;
		min-height: 300px;
		max-height: 400px;
	}
	// .page-form {
	// 	height: 600px;
	// 	overflow: scroll;
	// }
}
</style>